{extend name="template/edit" /}
{block name="style"}
<style>
tr .check-box > div {
    margin-top: 0px;
}
div .m-3{margin:3px;}
</style>
{/block}
{block name="content"}
<div class="page-container">
<form id="form" action="{$Think.config.base_url}{:url('admin/store.store/store_bind_class_spec_edit')}" method="post">
	    <input value="{$Request.param.sp_id}" name="sp_id" type="hidden">
	    <input value="{$Request.param.class_id}" name="class_id" type="hidden">
	    <input value="{$Request.param.store_id}" name="store_id" type="hidden">
          <table class="table table-border table-bordered table-hover table-bg mt-20">
	        <thead>
	        <tr class="text-c">
	            <th colspan=1>全选</th>
	            <th colspan=8>选项</th>
	        </tr>
	        </thead>
	        <tbody>
	        <tr >
	        	<td class="text-c">
					 <input type="checkbox" id="check_all">
					 <label for="check_all">全选</label>
				</td>
	        	<td>
		        	<div id='container' class="skin-minimal">
		        	{volist name="spec_index_info" id="val" key="key"}
					  <div class="check-box m-3">
					    <input name='node[][spec_name]' {if(in_array($val.sp_index_name,$check_name))}checked{/if} value="{$val.sp_index_name|default=''}" type="checkbox" id="checkbox-{$val.sp_index_id|default=0}">
					    <label for="checkbox-{$val.sp_index_id|default=0}">{$val.sp_index_name|default=''}</label>
					    <i sp_index_id="{$val.sp_index_id|default=''}" class="delete_spec icon Hui-iconfont f-18 c-red">&#xe6a6;</i>
					  </div>
					  {/volist}
					</div>
					<div id="specAdd1" class='c-green' style="margin:10px;font-size:15px;display: block;">
						<a id="specAdd" href="javascript:void(0);"><i class="icon Hui-iconfont">&#xe600;</i>添加规格值</a>
					</div>
					<div id="specAdd2" class='c-green' style="margin:10px;font-size:15px;display: none;">
		                <div style='width:150px;display:inline-block'>
		                <input class="input-text radius" type="text" placeholder="规格值名称" maxlength="20" data-url="{$Think.config.base_url}{:url('admin/store.store/spec_index_save')}" data-spid="{$Request.param.sp_id}" >
		                </div>
		                &nbsp;&nbsp;<a href="javascript:void(0);" id="specAddSubmit" >确认</a>&nbsp;&nbsp;
		                			<a href="javascript:void(0);" id="specAddCancel" >取消</a>
		            </div>
				</td>
	        </tr>
	        </tbody>
	  	  </table>
          <div class='mt-20 text-c'>
	          <input id='submitBtn' class="btn btn-primary radius" type="submit"  value="提交">
          </div>
          </form>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        $("#form").Validform({
            tiptype: 2,
            ajaxPost: true,
            showAllError: true,
            callback: function (ret) {
                ajax_progress(ret);
            }
        });
        var delete_url = '{$Thinkl.config.base_url}{:url("admin/store.store/spec_index_del")}';
    	//全部选择事件
        $(document).on('click','#check_all',function(){
            if ($(this).is(':checked')){
            	$('input[name="node[][spec_name]"]').attr('checked',true);
            }else{
            	$('input[name="node[][spec_name]"]').attr('checked',false);
            }
        });

        //删除事件
        $(document).on('click','.delete_spec',function(){
            var value = $(this).parent().find('label').html();
            var spec_index_id = $(this).attr('sp_index_id');
            _self = this;
            if(confirm('确定删除"'+value+'"这个规格值吗?')){
            	$.getJSON(delete_url, {spec_index_id : spec_index_id}, function(data){
                    if (data.done) {
                		$(_self).parent().remove();
                    }else{
                        alert('删除失败！'+data.msg);
                    }
                });
            }
        });

        /* AJAX添加规格值 */
        // 添加规格
        $('#specAdd').click(function(){
            var _parent = $(this).parents('td');
            $('#specAdd1').hide();
            $('#specAdd2').show();
            $('#specAdd2 input').focus();
        });
        // 取消
        $('#specAddCancel').click(function(){
            var _parent = $(this).parents('td');
            $('#specAdd1').show();
            $('#specAdd2').hide();
            $('#specAdd2 input').val('');
        });
        // 提交规格
        $('#specAddSubmit').click(function(){
            var _parent = $(this).parent();
            var _input = $('#specAdd2').find('input');
            var url = _input.attr('data-url');
            var sp_id = _input.attr('data-spid');
            $('#specAdd1').show();
            $('#specAdd2').hide();
            stamp = new Date().getTime();
            $.getJSON(url, {sp_id : sp_id , name : _input.val()}, function(data){
                if (data.done) {
                	$('#container').append( '<div class="check-box m-3"><input value="'+_input.val()+'"  type="checkbox" name="node[][spec_name]" id="checkbox-'+ stamp +'">  ' +
                    	'<label for="checkbox-'+stamp+'" >'+_input.val()+'</label><i sp_index_id="'+
                    	data.index_id + '" class="delete_spec icon Hui-iconfont f-18 c-red">&#xe6a6;</i> </div>');
                    _input.val('');
                    $('#specAdd1').show();
                    $('#specAdd2').hide();
                    $('.skin-minimal input').iCheck({
                        checkboxClass: 'icheckbox-blue',
                        radioClass: 'iradio-blue',
                        increaseArea: '20%'
                    });
                }else{
                    alert('保存失败！');
                }
            });
        });

        //表单提交事件
    	$("#submitBtn").click(function(){
            $("#form").submit();
    	});
    })
</script>
{/block}